סדרת מדריכים שתלמד איך לפתח בפייסבוק ותלמד על ה-SocialGraph, על ה-GraphAPI, על OpenGraph, על FQL , על FacebookSDK לג'אווה-סקריפט ועוד.
בפרק הראשון נלמד מה זה social graph ונתחיל לעבוד עם FacebookSDK.
![[פיתוח בפייסבוק][1] הקדמה והתחלה.](static\images\xpixel.gif.pagespeed.ic.rbts0odkqk.png "http://img855.imageshack.us/img855/8301/opengraphsplash1.png"){kind=tracking}
שלום לכולם.
זו היא סדרת מדריכים שתעסוק בפיתוח בפייסבוק בסביבת צד לקוח עם ג'אווה-סקריפט.
הסוקייל גראף'
הסוקייל גראף' (Social Graph) הוא מושג בפייסבוק שמתאר את כל המידע באמצעות קשרים:
- לאיש X יש קשר לאיש Y בכך שהוא חבר שלו
- לאיש X יש קשר לסטטוס Y בכך שהוא עשה לו לייק
- לאיש X יש קשר עם קבוצה Y בכך שהוא חבר בה
סטורי
הסוקייל גראף' מייצג כל קשר כזה כסטורי (story, סיפור):
- כשמופיע לך על הניוזפיד "x likes a status" זה סטורי על קשר מסוג לייק שנוצר בין המשתמש X לסטטוס Y.
- כשמופיע לך על הניוזפיד סטטוס ש-X כתב זה סטורי מיוחד שמייצג פוסט שפרסמת.
- כשמופיע לך על הניוזפיד ש-X עשה לייק לתמונה באינסטגרם זה סטורי מיוחד שמייצג קשר חיצוני שלא קשור לפייסבוק.
אופן גראף'
האופן גראף' (Open Graph) הוא API שמאפשר לעשות סטוריאס (Stories) שלא תמיד לא בשליטת פייסבוק:
- כשמופיע לך על הניוזפיד ש-X קרא מאמר בmakoconnect זה סטורי שאתר מאקו עושה.
לסטורי שבא מהאופן גראף' יש שלושה אלמנטים:
- סבג'אקט (subject): מי שעשה את זה. לדוגמא: X.
- אקשן (action): מה שקרה. לדוגמא: לייק.
- אובייקט (object): על מה זה קרה. לדוגמא: סטטוס.
"X עשה לייק לסטטוס"
סטוריאס שבאו מהאופן גראף' יכולים לעשות צורה מיוחדת שבה הסטורי יראה, והם יכולים להוסיף לו actions שיופיעו ליד כפתורי הלייק והתגובה (כמו See friendship בקשר בין משתמשים).
הרבה מהסטוריאס שדווקא כן בשליטת פייסבוק נוצרים ע"י האופן גראף', בכך שהם לוקחים את הקשר שנוצר והופכים אותו לסטורי בעזרת שלושת האלמנטים.
רוב האופן גראף' מבוסס על פרוטוקול בשם Open Graph (מן הסתם) או בקיצור og, שעליו מבוססות עוד רשתות כמו גוגל+.
גראף' אייפיאיי
ה-GraphAPI הוא הAPI הכי גדול בSDK של פייסבוק והוא מאפשר לקבל, לשלוח או למחוק מידע מהסוקייל גראף', ולו יש API מיוחד ונוח מאוד.
הגראף' אייפיאיי בנוי בצורה של URL כשיש לו נתיב ופרמטרים
הגראף'API תמיד מחזיר אובייקט. כווב-סרביס וכJS-SDK הוא יחזיר JSON.
יצירת האפליקציה
בשביל שנוכל ללהשתמש בSDK אנחנו צריכים שיהיה לנו הרשאות מתאימות כדי שנוכל לגשת לדברים שאנחנו צריכים.
בשביל שיהיו לנו איך לקבל הרשאות אנחנו צריכים ליצור אפליקציה:
1) ניכנס לפאנל הניהול של האפליקציות בכתובת https://developers.facebook.com/apps
2) נלחץ על Create New App ונמלא את השדות:
- AppName: שם של האפליקציה.
- Namespace: שם מיוחד לאפליקציה, בלי רווחים, שמשתמשים בו במיוחד באופן גראף'.
- Web Hosting: מאפשר אחסון חינם ע"י heroku עם PHP, רובי, פייתון ו-NodeJS
3) תכתבו את קוד האבטחה.
ה-SDK
סוף סוף נתחיל לעבוד עם הSDK.
נעשה את זה עם ג'אווה-סקריפט בצד לקוח.
קודם כל נטען את הספריה.
נשים דיב עם המזהה fb-root, זה הוא דיב פנימי של הספרייה ואין לגעת בו.
נקשר לסקריפט https://connect.facebook.net/en_US/all.js
ונקשר לסקריפט שלנו.
<div id="fb-root" />
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script src="script.js"></script>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script src="script.js"></script>
הספרייה היא OOP-Based והאובייקט הגלובאלי שלה הוא window.FB.
בשביל לאתחל אותה נקרא למתודה init שמקבל אובייקט שבשלב הזה יהיה לו רק ערך אחד:
- appId <מחרוזת>: המזהה של האפליקציה כפי שמופיע בפאנל הניהול.
FB.init({appId: '178452825589067'});
עכשיו נשתמש בגראף' אייפיאיי כדאי לקבל מידע על משתמש.
כדאי להשתמש בגראף' אייפיאיי אנחנו נשתמש במתודה api (מן הסתם) שמקבלת שני פרמטרים בשלב הזה: מחרוזת של הבקשה וקלבק (callback).
FB.api('/4',function(d) {
alert(d.name);
})
alert(d.name);
})
אצלי בדוגמא קיבלתי את השם של חברנו היקר צוקרברג.
קוד להרצה: http://jsfiddle.net/38Gk5/
בפרק הבא של המדריך אני ידבר עוד על האובייקטים השונים בGraphAPI, על התחברות לפייסבוק, ועל כלים ועזרים לעבודה בסביבת ה-SDK.
תגובות לכתבה:
כל הכבוד :)! המשך כך
מדריך טוב. תודה רבה.
רק הערה אחת:
אל תכתוב בעברית דברים שכתובים באנגלית. זה לא נראה טוב. אני מדבר על "אופן גראף" וכל אלה.
בנוסף גם טעית... כי social זה סושיאל (סוציאלי, חברתי) ולא סוקיאל.
Stories זה סטוריס ולא סטוריאס..
בהצלחה ותודה רבה. :-)
אחלה מדריך, תודה רבה. :-)
@iiddaannyy
+1